<template>
	<view class="bottom-bar">
		<view 
			class="bottom-bar__fixed" 
			:style="{
				'bottom': tabbarSafeArea ? '50px' : 0,
				'box-shadow': shadow ? '0 -3px 6px rgba(0, 0, 0, 0.06)' : '',
				'background-color': bgColor
			}">
			<slot name="left"></slot>
			<view class="center">
				<slot name="center"></slot>
			</view>
			<slot name="right"></slot>
		</view>
	</view>
</template>

<script>
	/**
	 * 底部栏框架
	 */
	export default {
		name: 'bottom-bar',
		props: {
			tabbarSafeArea: Boolean, // 是否在tababr以上定位
			shadow: Boolean, // 阴影
			bgColor: {
				type: String,
				default: '#fff'
			}
		}
	}
</script>

<style lang="scss" scoped>
.bottom-bar {
	height: calc(110rpx + constant(safe-area-inset-bottom));
	height: calc(110rpx + env(safe-area-inset-bottom));
	&__fixed {
		position: fixed;
		left: 0;
		bottom: 0;
		right: 0;
		height: 110rpx;
		z-index: 666;
		padding: 0 30rpx;
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);
		display: flex;
		align-items: center;
		justify-content: flex-end;
		box-sizing: content-box;
		border-top: 1px solid #EAF0FA;
		.center {
			flex: 1;
		}
	}
}
</style>
